@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

body{margin:0;padding:0;font-size:12px;font-family:Arial, sans-serif;line-height:20px;color:#666;background-color:#FFF;}

/* Custom font */
h1, h2, h3, h4, h5, h6, .font, #table-menu li a, .tweetList p, .network-link, .links a, #back-button a, .button{font-family:'Open Sans Condensed', sans-serif;font-weight:normal}

h1, h2, h3, h4, h5, h6{ color:#000}

/* Color */
a, #table-menu li a, .skills .skill-rate{color:#0054A6;}
.skills li, .timeline .timeline-item p, .services .service-item h4, .tweetDate{border-left:2px solid #0054A6;}
.button span {background:#0054A6;}

section, article{margin:0;padding:0;}

h1 {font-size:36px;}
h2 {font-size:24px;}
h3 {font-size:18px;}
h4 {font-size:15px;}
h5 {font-size:13px;}
h6 {font-size:12px;}

img{border:0;}
span{color:#666;}
p{margin-top:15px;margin-bottom:0;width:315px;}

.content p:first-child{margin-top:0;}
a{text-decoration:none;}
a:hover{color:#666}
ul{margin:0;padding:0;list-style:none;float:left;}

/* special */
.preload{display:none;}
.center{text-align:center}
.clear{clear:both;}
.first{margin-top:0;}
.margin{margin:0}
.overflow{overflow:hidden}
.italic{font-style:italic}
.margin-left{margin-left:10px;}
.margin-right{margin-right:10px;}
.left{float:left}
*+html .ie-hide{display:none;}

.button{height:30px;line-height:30px;float:left;}
.button span{color:#FFF;padding:5px;}
.button:hover span{background:#666}

.pages{}
.pages-wrapper{margin-left:-360px;width:690px;overflow:hidden;}
.page{float:left;width:315px;height:235px;padding:0 15px;overflow:hidden;}

#wrapper{width:792px;margin:100px auto 0;background:#FFF;}
#wrapper-inner{clear:both;float:left;background:#FFF;height:265px;width:790px;border:1px solid #DDD;box-shadow: 0 1px 6px rgba(0, 0, 0, 0.20);}
#wrapper-left{position: relative;float:left;width:690px;height:265px;overflow:hidden;}

/* Background styles */
.pattern1{background-image: url('http://subtlepatterns.com/patterns/vertical_cloth.png');}
.pattern2{background-image: url(../img/patterns/pat2.png);}
.pattern3{background-image: url(../img/patterns/pat3.png);}
.pattern4{background-image: url(../img/patterns/pat4.png);}
.pattern5{background-image: url(../img/patterns/pat5.png);}
.pattern6{background-image: url(../img/patterns/pat6.png);}
.pattern7{background-image: url(../img/patterns/pat7.png);}
.pattern8{background-image: url(../img/patterns/pat8.png);}
.pattern9{background-image: url(../img/patterns/pat9.png);}
.pattern10{background-image: url(../img/patterns/pat10.png);}

/* HEAD */
#head-bar{width:396px;height:36px;margin:20px 0 15px 0;}
#header{float:left;width:310px;margin-left:10px;}
#header p{margin-top:10px;font-size:12px;text-transform:uppercase;font-weight:lighter;}
#back-button{display:none;position:absolute;height:48px;width:68px;margin:105px 0 0 335px;background:url(../img/back-button.png) no-repeat top left;cursor:pointer;}
#back-button{text-transform:uppercase;text-align:right;line-height:48px;}
#back-button a{float:left;margin-left:15px;}

/* ie7 hack*/
#back-button{*margin-left:-355px;}

/* MAIN */
#page{float:left;width:315px;height:235px;margin:0;}
#table{width:315px;height:235px;margin:0;}

#table-content{width:315px;height:auto;}
#table-content .first-header{margin-top:0;}
#table-content .content{clear:both;float:left;padding:15px;height:235px;width:100%;opacity:0;}
#table-content .content:first-child{opacity:1}

#menu{float:right;width:100px;height:265px;background:#FFF url(../img/menu-back.png) no-repeat top left;}
#table-menu{float:left;width:100%}
#table-menu li{clear:both;float:left;width:100%;height:52px;text-align:center;border-top:1px solid #DDD}
#table-menu li.current, #table-menu li:hover{background:#FFF url(../img/menu-active.png) no-repeat top left;cursor:pointer;}
#table-menu li:first-child{border:0;height:53px;}
#table-menu li a{text-transform:uppercase;line-height:52px;}
#table-menu li.current a{color:#333}

/* PORTFOLIO ----------------------------------------------- */
#portfolio{float:left;width:315px;height:235px;overflow:hidden;padding:15px;background:url(../img/portfolio.png) no-repeat top left;}
#portfolio-wrapper{width:100%;height:235px;width:760px;margin-left:-330px;overflow:hidden;}
#portfolio-list{float:left;height:235px;width:320px;margin-left:-5px;margin-top:-5px;}
#portfolio-items{width:315px;height:236px;background: none;}
#portfolio-content{float:left;width:315px;height:235px;margin-right:15px;opacity:0;-moz-opacity:0; filter:alpha(opacity=0);}

/* Image wall */
.portfolio-item{clear:both;float:left;width:315px;height:235px;}
.portfolio-link{float:left;overflow:hidden;margin:5px 0  0 5px;}
.portfolio-link img{clear:both;float:left;border:0;}
.portfolio-link:hover img, .lightbox:hover img{opacity:0.5;-moz-opacity:.50; filter:alpha(opacity=50)}
.c1,.vert.c2,.vert.c3{width:75px}
.c1,.horz.c2,.horz.c3{height:75px}
.vert.c2{height:155px}
.vert.c3{height:235px}
.horz.c2{width:155px}
.horz.c3{width:235px}

/* Portfolio item*/
.col-desc, .col-media{float:left;width:180px;overflow:hidden;}
.col-media{width:120px !important;}
.col-media.scroll .viewport{width:110px !important;}
.col-desc{margin-right:15px;}
.col-desc p{width:180px;}

.links li{padding-left:15px;border-left:2px solid #DDD;margin-top:5px;}
.links li:first-child{margin:0;}
.links li a{font-size:14px;line-height:18px;}

.list-horz{float:left;width:100%;margin:0;padding:0}
.list-horz li{float:left;margin-left:5px;}
.list-horz li:first-child{margin:0;}

.portfolio-desc.scroll{float:left;margin-top:15px;height:60px !important;overflow:hidden}
.portfolio-desc .viewport {height: 60px !important;}
.portfolio-desc p{width:295px}

/* ABOUT ----------------------------------------------- */
/* Skills */
#skills-list{float:left;height:80px;overflow:hidden}
#skills-list .viewport {height: 80px;}
.skills, .skills li{clear:both;float:left;}
.skills li{padding-left:15px;width:300px;margin-top:5px;}
.skills .skill-item{float:left;width:150px;min-width:150px !important;}

/* Timeline */
.timeline{clear:both;float:left;width:295px;}
.timeline li{clear:both;float:left;width:100%;margin-top:15px;}
.timeline li:first-child{margin-top:0;}
.timeline .timeline-item h4{margin:0;padding:0;line-height:17px;}
.timeline .timeline-item h5{font-style:italic;color:#999;margin:0;padding:0;line-height:16px;}
.timeline .timeline-item p{width:278px;padding-left:15px;}
.timeline .timeline-date{float:right;}

/* SERVICES ----------------------------------------------- */
.services{float:left;width:150px;margin-left:15px;}
.services.first{margin-left:0;}
.services li{clear:both;float:left;width:100%;margin-top:15px;}
.services li:first-child{margin-top:0;}
.services .service-item h4{margin:0;padding-left:15px;line-height:17px;}
.services .service-item h5{font-style:italic;color:#999;margin:0;padding:0;line-height:16px;}
.services .service-item p{width:150px;}
.services .service-date{float:right;}

/* NETWORK ----------------------------------------------- */
#tweets{float:left;width:100%;height:105px;margin-bottom:15px;}
.tweetList{clear:both;float:left;padding-left:55px;background:url(../img/network/tweet.png) no-repeat center left;}
.tweetList li{width:270px;}
.tweetList li p{font-size:18px;font-style:italic;line-height:22px;}
.tweetList li, .tweetList li p{width:260px;}
.tweetDate{padding-left:15px;margin-top:5px;width:245px;font-size:11px;font-style:italic;color:#666;}

.network{float:left;width:105px;}
.network.first{margin-left:0;}
.network li{clear:both;float:left;width:100%;margin-top:15px;}
.network li:first-child{margin-top:0;}
.network-link{font-size:16px;line-height:32px;margin-left:10px}
.network-icon img{float:left;}
.network-icon:hover img{opacity:0.5;-moz-opacity:.50; filter:alpha(opacity=50)}

/* CONTACT ----------------------------------------------- */
form, fieldset{
	margin:0;
	padding:0;
}
fieldset{
	border:0;
}
textarea{
	float:left;
	clear:both;
	margin: 10px 0 0 0;
	width:303px;
	max-width:303px;
}
input{
	margin:0;
	float:left;
	width:140px;
	text-indent:5px;
}
input, textarea{
	padding:5px;
	font:10px Arial, sans-serif;
	border:1px solid #D8D8D8;
	background:#FFF;
}

.empty{border-color: red;}

#contact-name{
	margin-right:10px;
}
#contact-message{
	margin-top:10px;
	max-height:117px;
	height:117px;
}
#contact-form{margin-bottom:5px;}
#email-loading{ display:none;float:right;text-indent:-9999px;height:24px;width:24px;*line-height:24px;background: url(../img/loading.gif) no-repeat top left transparent; }
#contact-details, #contact-details .viewport{height:60px}

/* Map */
.map{clear:both;float:left;width:315px;overflow:hidden;}
.map.small{height:125px;}
.map.big{height:200px;}

/* Slider */
.slider{overflow:hidden}
.slider .viewport{float:left;width:315px;height:100px;overflow:hidden;position:relative}
.slider .button{float:left;margin:0;line-height:12px;text-transform:uppercase;}
.slider .prev{margin-right:10px}
.slider .disable{visibility:hidden}
.slider .overview{position:absolute;left:0;top:0;margin:0;padding:0;list-style:none;}
.slider .overview > li{float:left;height:100px;width:315px;overflow:hidden;}
.portfolio-list .overview > li {height:235px;width:315px;}
.portfolio-list .viewport {height:235px;width:315px;}
.portfolio-list div.controls {width:315px; position : relative; float : none; left : 0px; top : -20px; z-index : 99; margin : 0; height : 20px;}
.portfolio-list div.controls div.prev-next a.button {background : #FFF; padding : 5px;}

.slider .controls{clear:both;float:left;margin:10px 0 0 0;height:10px;width:100%;overflow:hidden;}
.slider .prev-next{float:right;width:auto;height:15px;margin:0;}
.slider .prev-next li{float:left;}

.slider .nav{float:left;width:215px;margin:0;padding:0;height:10px}
.slider .nav li{float:left;width:10px;height:10px;background:url(../img/bullet.png) no-repeat top left;background-color:#0054A6;margin-left:10px;cursor:pointer}
.slider .nav li.current{background-color:#333;}
.slider .nav li:first-child{margin:0;}
.slider .nav span{display:none;}

.slider.small .viewport, .slider.small .overview > li{width:100px !important;height:100px !important;}
.slider.big .viewport, .slider.big .overview > li{height:215px !important;width:315px !important;}

.slider .caption{z-index:1000;position:absolute;}
.slider .caption.left, .slider .caption.right{margin:0;width:150px;height:215px;overflow:hidden}
.slider .caption.top, .slider .caption.bottom{margin:0;width:315px;height:auto;}
.slider .caption.right{margin-left:165px}
.slider .caption.bottom{bottom:0}
.slider .caption.top .caption-inner, .slider .caption.bottom .caption-inner{clear:both;float:left;width:295px;padding:10px;background:url(../img/caption.png) top left;}
.slider .caption.left .caption-inner, .slider .caption.right .caption-inner{clear:both;float:left;padding:10px;width:130px;height:195px;background:url(../img/caption.png) top left;}
.slider .caption.left .caption-inner p, .slider .caption.right .caption-inner p, .slider .caption.top .caption-inner p, .slider .caption.bottom .caption-inner p{width:100%}

/* Scrollbar */
.scroll{width:315px}
.scroll .viewport{width:305px;height:235px}
.scroll .viewport,.scroll .thumb,.scroll .thumb .end{overflow:hidden}
.scroll .viewport,.scroll .scrollbar,.scroll .track{position:relative}
.scroll p{width:285px}.scroll .overview{list-style:none;left:0}
.scroll .overview,.scroll .thumb{position:absolute;top:0}
.scroll .thumb,.scroll .thumb .end{background:#DDD;}
.scroll .thumb:hover,.scroll .thumb:hover .end{background:#999;}
.scroll .thumb,.scroll .thumb .end,.scroll .scrollbar,.scroll .thumb{cursor:pointer}
.scroll .scrollbar{float:right;width:5px}
.scroll .track{width:1px;margin-left:2px !important;}
.scroll .thumb .end,.scroll .thumb{width:5px;margin-left:-2px;}
.scroll .track{background:#DDD;height:100%;}
.scroll .thumb{height:20px;}.scroll .thumb .end{height:5px}
.scroll .disable{display:none}
.scroll .thumb{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}

/* Lightbox */
#zoombox img,#zoombox iframe{border:none}
#zoombox .zoombox_mask{background:#FFF;width:100%;z-index:90}
#zoombox .zoombox_mask,#zoombox .zoombox_gallery{position:fixed}
#zoombox .zoombox_mask,#zoombox .zoombox_prev,#zoombox .zoombox_next{height:100%;top:0}
#zoombox .zoombox_mask,#zoombox .zoombox_prev,#zoombox .zoombox_gallery{left:0}
#zoombox .zoombox_container,#zoombox .zoombox_prev,#zoombox .zoombox_next,#zoombox_loader,.zoombox .zoombox_title,.zoombox .zoombox_close{position:absolute}
#zoombox .zoombox_container{z-index:100}
#zoombox .relative{position:relative}
#zoombox .zoombox_prev,#zoombox .zoombox_next{width:50%;filter:alpha(opacity=0);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-moz-opacity:0;opacity:0}
#zoombox .zoombox_prev,#zoombox .zoombox_prev,#zoombox .zoombox_next,#zoombox .zoombox_close,#zoombox .zoombox_gallery,#zoombox_loader{cursor:pointer}
#zoombox .zoombox_prev:hover,#zoombox .zoombox_next:hover,#zoombox .zoombox_gallery img.current,#zoombox .zoombox_gallery img:hover{filter:alpha(opacity=100);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);-moz-opacity:1;opacity:1}
#zoombox .zoombox_next,#zoombox .zoombox_gallery{right:0}
#zoombox .multimedia .zoombox_prev,#zoombox .multimedia .zoombox_next,#zoombox .zoombox_gallery{display:none}
#zoombox .zoombox_gallery{background:#050505;z-index:120;bottom:-60px;text-align:center;filter:alpha(opacity=85);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=85);-moz-opacity:0.85;opacity:0.85;width:auto;height:60px;overflow:hidden}
#zoombox .zoombox_gallery img{height:50px;padding:5px;filter:alpha(opacity=30);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=30);-moz-opacity:0.3;opacity:0.3}
#zoombox_loader{background:url(../img/lightbox/loader.png) no-repeat left top;height:40px;width:40px;top:50%;left:50%;margin:-20px 0 0 -20px;z-index:110}
.zoombox .zoombox_container,.zoombox .content{background:#FFF}
.zoombox .zoombox_container{color:#666}
.zoombox .zoombox_container,.zoombox .zoombox_container{box-shadow:0 0 10px rgba(0, 0, 0, 0.20);border:1px solid #DDD;}
.zoombox .zoombox_title{color:#FFF;left:-1px;top:-22px}
.zoombox .zoombox_title,.zoombox .zoombox_title{text-shadow:1px 1px #000}
.zoombox .zoombox_close{background:url(../img/lightbox/close.png) no-repeat;width:30px;height:30px;right:-15px;top:-15px}
#zoombox.zoombox .zoombox_next{background:url(../img/lightbox/next.png) no-repeat right center}
#zoombox.zoombox .zoombox_prev{background:url(../img/lightbox/prev.png) no-repeat left center}
.avatar {
    border: 10px solid white;
    border-radius: 150px 150px 150px 150px;
    box-shadow: 0 1px 1px #999999;
    height: 150px;
    margin: 0 auto;
    overflow: hidden;
    width: 150px;
}